<template>
  <div class="filter-container">
    <el-collapse-transition>
      <div v-if="showHelp" class="help">
        <div class="transition-box">
          <p>使用方法:</p>
          <p>
            <span class="title">这里是报备给第三方的, 否则请到微信商户管理中心使用相同配置</span>
            <br />
            <br />
            请给支付公司报备<span class="color">(结尾/不要忘记, 域名请换成对应的)</span>:
            <br />
            <span class="text">http://www.xxx.com/pay/</span>
            <br />
            也许是:
            <br />
            <span class="text">https://www.xxx.com/pay/</span>
            <span class="color">(这个是https, 需要申请ssl证书)</span>
          </p>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'PayHelp',
  props: {
    showHelp: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="scss">
.help {
  .transition-box {
    //height: 100px;
    border-radius: 4px;
    background-color: #f5f7fa;
    border: 1px solid #dfe6ec;
    color: #909399;
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: left;
    span.title {
      color: red;
    }
    span.text {
      padding-left: 50px;
    }
    span.color {
      color: red;
      padding-left: 10px;
    }
  }
}
</style>
